import React, { Component } from 'react';

class Order extends Component {
  constructor() {
    super();
    this.state = {}
    this.nameRef = React.createRef()
    this.priceRef = React.createRef()
  }
  // preAddOrder是自己的函数，先整理数据，然后调用父组件传过来的函数
  preAddOrder() {
    let data = {
      id: this.props.list.length+1,
      name: this.nameRef.current.value,
      price: this.priceRef.current.value
    }
    this.props.addOrder(data);
    this.nameRef.current.value = '';
    this.priceRef.current.value = '';
  }
  render() {
    console.log(this.props);
    return (
      <div>
        <p>order：我是子组件，也是UI型组件，数据和逻辑来自父组件</p>
        {
          this.props.list.map((item,index) => {
            return (
              <div key={item.id}>
                {item.name}-￥{item.price}
                <button onClick={()=>this.props.delOrder(index)}>del</button>
              </div>
            )
          })
        }
        <input placeholder="请输入名称" ref={this.nameRef}></input>
        <input placeholder="请输入价格" ref={this.priceRef}></input>
        <button onClick={()=>this.preAddOrder()}>加入订单列表</button>
      </div>
    );
  }
}

export default Order;
